# เจาะลึกวิธีใช้ For Await Of ใน JavaScript จัดการลูป Asynchronous ขั้นเทพ

> สรุปการใช้งาน for await of statement สำหรับวนลูปข้อมูลแบบ Async Iterable ช่วยให้จัดการข้อมูลที่มาเป็นลำดับเวลาได้อย่างมีประสิทธิภาพ ลดความซับซ้อนของโค้ด

Full URL: https://www.topvery.com/blog/article.เจาะลึกวิธีใช้ForAwaitOfในJavaScriptจัดการลูปAsynchronousขั้นเทพ.BLO251220210150.Dev Developer
Base URL: https://www.topvery.com/

---

## ทำความรู้จักกับ For Await Of

คำสั่ง **for await...of** ในภาษา JavaScript ใช้สำหรับสร้างลูปเพื่อวนซ้ำข้อมูลจาก Object ที่เป็น async iterable (รวมถึง iterable แบบปกติด้วย) โดยหลักการทำงานจะคล้ายกับ for...of แต่ส่วนที่พิเศษคือมันสามารถรอรับค่าจาก Promise ที่ถูกส่งออกมาในแต่ละรอบการวนลูปได้

เรามักจะใช้งานคำสั่งนี้ภายใน async function หรือ async generator เพื่อจัดการกับข้อมูลที่ไม่ได้มาพร้อมกันในทันที เช่น การดึงข้อมูลแบบ Streaming หรือการอ่านไฟล์ขนาดใหญ่ทีละส่วน

## ไวยากรณ์ (Syntax)

รูปแบบการเขียน Syntax นั้นเข้าใจง่าย ดังนี้:

for await (variable of iterable) {
  statement
}
## ความแตกต่างระหว่าง For Of และ For Await Of

ในขณะที่ for...of ปกติจะใช้กับข้อมูลที่มีอยู่แล้ว (Synchronous) การใช้ for await...of จะทำการ await ค่าแต่ละค่าที่ได้รับจาก iterable โดยอัตโนมัติ ทำให้มั่นใจได้ว่าข้อมูลในรอบนั้นๆ ถูกโหลดหรือประมวลผลเสร็จสิ้นก่อนที่จะเริ่มรอบถัดไป

## ตัวอย่างการใช้งานกับ Async Generators

ตัวอย่างนี้แสดงการวนลูปตัวเลขที่ถูกส่งออกมาแบบไม่พร้อมกัน (Asynchronous) โดยใช้ Async Generator:

async function* asyncGenerator() {
  let i = 0;
  while (i < 3) {
    yield i++;
    // จำลองการรอ 1 วินาทีในแต่ละรอบ
    await new Promise(resolve => setTimeout(resolve, 1000));
  }
}

(async function() {
  for await (const num of asyncGenerator()) {
    console.log(num);
  }
})();
// Output:
// 0
// 1
// 2การใช้เทคนิคนี้ช่วยให้นักพัฒนา Web Development เขียนโค้ดที่อ่านง่ายขึ้นเมื่อต้องจัดการกับข้อมูลที่เป็น Stream หรือ Array ของ Promise จำนวนมาก